<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容(最多吐槽120字)" maxlength="120" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in comments" :key="i">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户:{{item.userName}}&nbsp;&nbsp;&nbsp;&nbsp;发表时间:{{item.time | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content === 'undefined' ? "maomaoSB" : item.content}}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>

    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            pageIndex: 1,
            comments: [{
                userName: "毛毛",
                time: new Date(),
                content: "毛毛SB"
            },
            {
                userName: "毛毛",
                time: new Date(),
                content: "毛毛SB"
            },
            {
                userName: "毛毛",
                time: new Date(),
                content: "毛毛SB"
            },
            {
                userName: "毛毛",
                time: new Date(),
                content: "毛毛SB"
            },
            {
                userName: "毛毛",
                time: new Date(),
                content: "毛毛SB"
            },
            {
                userName: "毛毛",
                time: new Date(),
                content: "毛毛SB"
            },
            {
                userName: "毛毛",
                time: new Date(),
                content: "毛毛SB"
            }],

            msg: ''

        }
    },
    methods: {
        getMore () {
            Toast('没有更多了')

        },
        postComment () {
            // console.log(this.comments)
            //trim()是清除空格
            if (this.msg.trim().length === 0) {
                return Toast('评论内容不能为空')
            }
            var cmt = { userName: '匿名用户', time: new Date(), content: this.msg.trim()}
            this.comments.unshift(cmt)
            this.msg = ''
        }
    }
}
</script>

<style>
.cmt-container h3{
    font-size: 18px;
}
textarea{
    font-size: 14px;
    height: 85px;
    margin:0;
}
.cmt-list{
    margin: 5px 0;
}
.cmt-item{
    font-size: 13px;
}
.cmt-title{
    background-color: #ccc;
    line-height: 30px;
}
.cmt-body{
    line-height: 35px;
    text-indent: 2em;
}
</style>
